<template>
    <div class="exam-content">
      <div class="exam-body">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/?type=1' }"
            >科目一</el-breadcrumb-item
          >
          <el-breadcrumb-item>章节练习</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="exam-list">
          <div class="exam-item" v-for="item in examList" :key="item.id" @click="gotoExam(item.id)">
            <div>{{ item.name }}</div>
            <div class="exam-num">
              <div>{{ item.num }}题</div>
              <img src="../../assets/矩形 16.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "ChapterExercise",
    data() {
      return {
        examList: [
          { id: 1, name: "五月新规", num: 951 },
          { id: 2, name: "十月新规", num: 951 },
          { id: 3, name: "准驾车型", num: 951 },
          { id: 4, name: "安全辅助驾驶系统（英文字母题）", num: 951 },
          { id: 5, name: "谋取利益", num: 951 },
          { id: 6, name: "酒驾处罚扣分", num: 951 },
          { id: 7, name: "速度（高速公路最高速度）", num: 951 },
          { id: 8, name: "速度（高速公路车道限速）", num: 951 },
          { id: 9, name: "速度（道路中心线最高时速）", num: 951 },
          { id: 10, name: "汽车仪表盘指示灯", num: 951 },
          { id: 11, name: "路面标识标线", num: 951 },
        ],
      };
    },
    methods:{
        gotoExam(id){
            this.$router.push({
                path:'/ExamExercise',
                query:{
                    type:1,
                    id
                }
            })
        }
    }
  };
  </script>
  
  <style lang="scss">
  .exam-body {
    padding: 1.5% 12.5%;
    background-color: #fff;
  
    .exam-list {
      margin-top: 2vh;
      border-top: 1px solid #e6e6e6;
  
      .exam-item {
        display: flex;
        justify-content: space-between;
        padding: 2vh 0;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
  
        .exam-num {
          display: flex;
          color: #999999;
  
          > img {
            width: 1vw;
            height: 2vh;
          }
        }
      }
    }
  }
  </style>